<template>
  <div>
    <i-vxe-table ref="iVxeTableRef" @vxeTableSearchFun="vxeTableSearchFun" :tableData="tableData"></i-vxe-table>
    <lib-doc :libDocData="libDocData"></lib-doc>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IVxeTable } from 'wd-platform-library'
import { TableDataInterFace, PageInfoInterFace, ResultInterFace } from 'wd-platform-library/lib/src/IVxeTable/src/IVxeTableInterFace'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
interface AppResult {
  appId: string;
  appName: string;
  appSecret: string;
}

export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const iVxeTableRef = ref()
        const dataList = [
            {
                appName: '系统管理',
                appId: 'auth',
                appSecret: 'auth'
            },
            {
                appName: '产品管理',
                appId: 'product',
                appSecret: 'product'
            },
            {
                appName: '营销获客',
                appId: 'channel',
                appSecret: 'channel'
            },
            {
                appName: '线上资源',
                appId: 'consult',
                appSecret: 'consult'
            },
            {
                appName: '订单管理',
                appId: 'order',
                appSecret: 'order'
            },
            {
                appName: '数据统计',
                appId: 'statistics',
                appSecret: 'statistics'
            }
        ]
        const tableData = reactive<TableDataInterFace>({
            type: 'app_table', // 每个表格唯一表示符
            tableInfo: {
                columns: [
                    {
                        field: 'appName',
                        minWidth: 150,
                        title: '应用名称',
                        fixed: 'left',
                        searchFilter: {
                            type: 'input',
                            placeholder: '请输入姓名'
                        }
                    },
                    {
                        field: 'appId',
                        minWidth: 150,
                        title: '应用ID',
                        searchFilter: {
                            type: 'select',
                            placeholder: '请输入应用名称',
                            list: [
                                { label: '前端开发', value: '前端' },
                                { label: '后端开发', value: '后端' },
                                { label: '测试', value: '测试' },
                                { label: '程序员鼓励师', value: '程序员鼓励师' }
                            ],
                            filterMultiple: false
                        }
                    },
                    {
                        field: 'appSecret',
                        minWidth: 200,
                        title: 'appSecret',
                        searchFilter: {
                            type: 'select',
                            placeholder: '请选择姓名2',
                            list: [
                                { label: '前端开发', value: '前端' },
                                { label: '后端开发', value: '后端' },
                                { label: '测试', value: '测试' },
                                { label: '程序员鼓励师', value: '程序员鼓励师' }
                            ],
                            filterMultiple: true
                        }
                    }
                ], // 表头配置
                data: [] // 数据集合
            },
            callback: async (pageInfo: PageInfoInterFace) => {
                return {
                    resultList: dataList,
                    total: 10
                } as ResultInterFace<AppResult>
            }
        })
        const vxeTableSearchFun = (field: string, value: any) => {
            console.log(field, field)
            alert('我筛选了' + field + ' 值: ' + value)
        }
        const libDocData: LibDocInterface = {
            title: '自定义表格组件',
            docList: [
                {
                    label: '引入组件',
                    value: "import { IVxeTable } from 'wd-platform-library'"
                },
                {
                    label: '创建表格对象',
                    type: 'pre',
                    value: `
        const iVxeTableRef = ref()
        const tableData = reactive<TableDataInterFace>({
            type: 'app_table', // 每个表格唯一表示符
            tableInfo: {
                columns: [
                    {
                        field: 'appName',
                        minWidth: 150,
                        title: '应用名称',
                        fixed: 'left',
                        searchFilter: {
                            type: 'input',
                            placeholder: '请输入姓名'
                        }
                    },
                    {
                        field: 'appId',
                        minWidth: 150,
                        title: '应用ID',
                        searchFilter: {
                            type: 'select',
                            placeholder: '请输入应用名称',
                            list: [
                                { label: '前端开发', value: '前端' },
                                { label: '后端开发', value: '后端' },
                                { label: '测试', value: '测试' },
                                { label: '程序员鼓励师', value: '程序员鼓励师' }
                            ],
                            filterMultiple: false
                        }
                    },
                    {
                        field: 'appSecret',
                        minWidth: 200,
                        title: 'appSecret',
                        searchFilter: {
                            type: 'select',
                            placeholder: '请选择姓名2',
                            list: [
                                { label: '前端开发', value: '前端' },
                                { label: '后端开发', value: '后端' },
                                { label: '测试', value: '测试' },
                                { label: '程序员鼓励师', value: '程序员鼓励师' }
                            ],
                            filterMultiple: true
                        }
                    }
                ], // 表头配置
                data: [] // 数据集合
            },
            callback: async (pageInfo: PageInfoInterFace) => {
                return {
                    resultList: dataList,
                    total: 10
                } as ResultInterFace<AppResult>
            }
        })
        //筛选回调
        const vxeTableSearchFun = (field: string, value: any) => {
            console.log(field, field)
            alert('我筛选了' + field + ' 值: ' + value)
        }
        `
                },
                {
                    label: '关键代码',
                    type: 'pre',
                    value: `
    tableInfo: {
        columns: [
            {
                field: 'appName',
                minWidth: 150,
                title: '应用名称',
                fixed: 'left',
                searchFilter: {   //表头筛选配置
                    type: 'input',  //type:表示搜索类型 input:输入框,select:下拉框
                    placeholder: '请输入姓名'
                }
            },
            {
                field: 'appSecret',
                minWidth: 200,
                title: 'appSecret',
                searchFilter: {    //表头筛选配置
                    type: 'select',  //type:表示搜索类型 input:输入框,select:下拉框
                    placeholder: '请选择姓名2',
                    list: [   //下拉框集合
                        { label: '前端开发', value: '前端' },
                        { label: '后端开发', value: '后端' },
                        { label: '测试', value: '测试' },
                        { label: '程序员鼓励师', value: '程序员鼓励师' }
                    ],
                    filterMultiple: true //是否多选
                }
            }
        ]
    }`
                },
                {
                    label: '关键代码:筛选回调',
                    type: 'pre',
                    value: `
    <i-vxe-table ref="iVxeTableRef" @vxeTableSearchFun="vxeTableSearchFun" :tableData="tableData"></i-vxe-table>
    const vxeTableSearchFun = (field: string, value: any) => {
            console.log(field, field)
            alert('我筛选了' + field + ' 值: ' + value)
    }`
                }
            ]
        }
        return {
            vxeTableSearchFun,
            tableData,
            libDocData,
            iVxeTableRef
        }
    },
    components: {
        IVxeTable,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template {
  display: flex;
}
</style>
